import React from 'react';
import { Tag } from 'antd';
import { NavLink } from 'react-router-dom';
import tagList from '../../config/tags.jsx';
import './index.less';


class NavRight extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      tagList: tagList,
      color:"red"
    }
  }
  render() {
    const tagList = this.state.tagList;
    return (
      <div>
        <div className="aside">
          <h3 className="title">
            <span className="hot-tag">热门标签</span>
            <span className="link-more">
              <NavLink to="/tags" >更多>></NavLink>
            </span>
          </h3>
          <ul className="tags">
            {
              tagList.map((item)=>{
                return(
                  <li className="tags-content" key={item.classid}>
                    <h4>{item.name}</h4>  
                    <div>
                      {
                        item.list !== 0
                        ? item.list.map(tag =>{
                          return(
                            <Tag color={this.state.color} key={tag.classid}>{tag.name}</Tag>
                          )                    
                        })
                        : null
                      }
                    </div>
                 </li>
                )
              })
            }
          </ul>
        </div>
      </div>
    )
  }
}
export default NavRight;
